<template>
  <div class="afterSaleDetails">
    <!--售后订单状态    -->
    <!--待商家处理-->
    <div v-if="state==='1'" class="WaitForPickUp">
      <div class="ele-title-1"><h4>订单详情</h4></div>
      <div class="ele-title-2">
        <el-col :span="24">
          <el-col :span="6"><h2>状态:待商家处理</h2></el-col>
          <el-col :span="6" class="el-col-offset-1"><h2>售后方式:仅退款</h2></el-col>
        </el-col>
      </div>
      <div class="ship-state">
        <p>退款金额：{{ amount }}</p>
      </div>
      <div class="ele-button">
        <el-button
          class="ele-btn"
          type="primary"
          @click="changeAfterSaleState(1)"
        >同意</el-button>
        <el-button
          class="ele-btn"
          type="primary"
          @click="changeAfterSaleState(0)"
        >拒绝</el-button>
        <el-button
          class="ele-btn"
          type="primary"
          @click="changeAfterSaleState(2)"
        >修改退款金额</el-button>
      </div>
      <div class="custom-radio">
        <b>协商备注</b>
      </div>

      <div class="cus-baoguo">
        <div class="left">
          <div class="tops">
            <el-input v-model="remark" type="textarea" :rows="6" />
          </div>
          <div class="bottoms">
            <el-button @click="submitRemark">提交</el-button>
          </div>
        </div>
        <div class="right">
          <el-timeline v-for="(item,index) in remarks" :key="index">
            <el-timeline-item :timestamp="item.remarks+' '+item.userName" placement="top">
              <el-card>
                <h4>{{ item.remark }}</h4>
              </el-card>
            </el-timeline-item>

            <!--            <el-timeline-item timestamp="2018-4-2 12:00" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
              </el-card>
            </el-timeline-item>-->
          </el-timeline>

        </div>
      </div>

      <div class="ele-content-info">
        <ul>
          <li>
            <span class="ele-title-txt">售后信息</span>
          </li>
          <li>
            <span class="ele-font-left">售后编号:</span><span class="ele-font">{{ afterSaleInfo.afterSaleSn }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请售后时间:</span><span class="ele-font">{{ afterSaleInfo.applyTime }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请人:</span><span class="ele-font">{{ afterSaleInfo.applicant }}</span>
          </li>
          <li>
            <span class="ele-font-left">联系方式:</span><span class="ele-font">{{ afterSaleInfo.applicantPhone }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">售后类型</span></li>
          <li><span class="ele-font-left">售后方式:</span><span>{{ afterSaleInfo.afterSaleType }}</span></li>
          <li>
            <span class="ele-font-left">退款金额:</span><span>{{ afterSaleInfo.refundAmount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.refundCount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款原因:</span><span>{{ afterSaleInfo.refundReason }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">订单信息</span></li>
          <li><span class="ele-font-left">商品金额:</span><span>{{ afterSaleInfo.goodsAmount }}</span></li>
          <li><span class="ele-font-left">实付金额:</span><span>{{ afterSaleInfo.actualAmount }} &nbsp; 退款金额</span></li>
          <li><span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.goodsCount }}</span></li>
          <li><span class="ele-font-left">订单号:</span><span>{{ afterSaleInfo.orderSn }}</span></li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">下单信息</span></li>
          <li>
            <span class="ele-font-left">物流:</span><span>{{ afterSaleInfo.logistics }}</span>
          </li>
          <li>
            <span class="ele-font-left">下单门店:</span><span>{{ afterSaleInfo.storeName }}</span>
          </li>
          <li>
            <span class="ele-font-left">门店地址:</span><span>{{ afterSaleInfo.storeAddress }}</span>
          </li>
        </ul>
      </div>
      <!--      <div class="ele-content-info">
        <ul>
          <li>
            <span class="ele-title-txt">收货信息</span>
            <el-button type="text" @click="copyInfo">复制</el-button>
          </li>
          <li>
            <span class="ele-font-left">收货人:</span><span class="ele-font">{{ info.consignee }}</span>
          </li>
          <li>
            <span class="ele-font-left">电话:</span><span class="ele-font">{{ info.phone }}</span>
          </li>
          <li>
            <span class="ele-font-left">收货地址:</span><span class="ele-font">{{ info.receiptAddress }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">下单信息</span></li>
          <li><span class="ele-font-left">运费:</span><span>{{ freight }}</span></li>
          <li>
            <span class="ele-font-left">下单门店:</span><span>{{ orderShop }}</span>
          </li>
          <li>
            <span class="ele-font-left">门店地址:</span><span>{{ shopAddress }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">买家信息</span></li>
          <li><span class="ele-font-left">买家:</span><span>{{ info.consignee }}&nbsp;{{ info.phone }}</span></li>
          <li><span class="ele-font-left">备注:</span><span>{{ info.remark }}</span></li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">支付信息</span></li>
          <li>
            <span class="ele-font-left">支付方式:</span><span>{{ payment }}</span>
          </li>
          <li>
            <span class="ele-font-left">支付金额:</span><span>{{ payAmount }}</span>
          </li>
        </ul>
      </div>-->

      <table class="tableCustom">
        <thead>
          <tr>
            <td>商品</td>
            <td>单价</td>
            <td>数量</td>
            <td>类型</td>
            <td>运费</td>
            <td>优惠</td>
            <td>租期</td>
            <td>合计</td>
            <td>状态</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in goodsInfo" :key="index" class="for-list">
            <td class="ele-tr-td">
              <div class="ele-te-div">
                <img :src="item.goodsPic" alt="">
                <div class="right">
                  <p>{{ item.goodsName }} <span class="custom">医柜</span></p>
                  <p>规格:{{ item.goodsSpec }}</p>
                  <p>设备编号:{{ item.goodsSn }}</p>
                </div>
              </div>
            </td>
            <td>{{ item.goodsPrice }}</td>
            <td>{{ item.goodsCount }}</td>
            <td>{{ item.goodsType }}</td>
            <td><p>{{ item.shipDictName }}</p><p>{{ item.transport }}</p><p>{{ item.distributeTime }}</p><p>{{ item.freight }}</p></td>
            <td>{{ item.discount }}</td>
            <td>{{ item.total }}</td>
            <td>待付款</td>
          </tr>
        </tbody>
      </table>
      <!--拒绝原因  -->
      <el-dialog
        :modal="false"
        title="拒绝原因"
        :visible.sync="dialogRefues"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          v-model="refuseReason"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRefues = false">取 消</el-button>
          <el-button type="primary" @click="refuse">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改退款金额  -->
      <el-dialog
        :modal="false"
        title="修改退款金额"
        :visible.sync="dialogChangeAmount"
        width="30%"
        :before-close="handleClose"
      >
        <el-form>
          <el-form-item label="退款金额">
            <el-col :span="12">
              <el-input v-model="changeRefundAmount" placeholder="输入金额" />
            </el-col>
            <el-col :span="3">元</el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogChangeAmount = false">取 消</el-button>
          <el-button type="primary" @click="changeRefund">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--待用户处理-->
    <div v-if="state==='2'" class="WaitForPickUp">
      <div class="ele-title-1"><h4>订单详情</h4></div>
      <div class="ele-title-2">
        <el-col :span="24">
          <el-col :span="6"><h2>状态:待用户处理</h2></el-col>
          <el-col :span="6" class="el-col-offset-1"><h2>售后方式:退货退款</h2></el-col>
        </el-col>
      </div>
      <div class="ship-state">
        <p>退款金额：{{ amount }}</p>
      </div>
      <!--      <div class="ele-button">
        <el-button
          class="ele-btn"
          type="primary"
          @click="changeAfterSaleState(1)"
        >同意</el-button>
        <el-button
          class="ele-btn"
          type="primary"
          @click="changeAfterSaleState(0)"
        >拒绝</el-button>
        <el-button
          class="ele-btn"
          type="primary"
          @click="changeAfterSaleState(2)"
        >修改退款金额</el-button>
      </div>-->
      <div class="custom-radio">
        <b>协商备注</b>
      </div>

      <div class="cus-baoguo">
        <div class="left">
          <div class="tops">
            <el-input v-model="remark" type="textarea" :rows="6" />
          </div>
          <div class="bottoms">
            <el-button @click="submitRemark">提交</el-button>
          </div>
        </div>
        <div class="right">
          <el-timeline v-for="(item,index) in remarks" :key="index">
            <el-timeline-item :timestamp="item.remarks+' '+item.userName" placement="top">
              <el-card>
                <h4>{{ item.remark }}</h4>
              </el-card>
            </el-timeline-item>

            <!--            <el-timeline-item timestamp="2018-4-2 12:00" placement="top">
                          <el-card>
                            <h4>更新 Github 模板</h4>
                          </el-card>
                        </el-timeline-item>-->
          </el-timeline>

        </div>
      </div>

      <div class="ele-content-info">
        <ul>
          <li>
            <span class="ele-title-txt">售后信息</span>
          </li>
          <li>
            <span class="ele-font-left">售后编号:</span><span class="ele-font">{{ afterSaleInfo.afterSaleSn }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请售后时间:</span><span class="ele-font">{{ afterSaleInfo.applyTime }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请人:</span><span class="ele-font">{{ afterSaleInfo.applicant }}</span>
          </li>
          <li>
            <span class="ele-font-left">联系方式:</span><span class="ele-font">{{ afterSaleInfo.applicantPhone }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">售后类型</span></li>
          <li><span class="ele-font-left">售后方式:</span><span>{{ afterSaleInfo.afterSaleType }}</span></li>
          <li>
            <span class="ele-font-left">退款金额:</span><span>{{ afterSaleInfo.refundAmount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.refundCount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款原因:</span><span>{{ afterSaleInfo.refundReason }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">订单信息</span></li>
          <li><span class="ele-font-left">商品金额:</span><span>{{ afterSaleInfo.goodsAmount }}</span></li>
          <li><span class="ele-font-left">实付金额:</span><span>{{ afterSaleInfo.actualAmount }} &nbsp; 退款金额</span></li>
          <li><span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.goodsCount }}</span></li>
          <li><span class="ele-font-left">订单号:</span><span>{{ afterSaleInfo.orderSn }}</span></li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">下单信息</span></li>
          <li>
            <span class="ele-font-left">物流:</span><span>{{ afterSaleInfo.logistics }}</span>
          </li>
          <li>
            <span class="ele-font-left">下单门店:</span><span>{{ afterSaleInfo.storeName }}</span>
          </li>
          <li>
            <span class="ele-font-left">门店地址:</span><span>{{ afterSaleInfo.storeAddress }}</span>
          </li>
        </ul>
      </div>
      <!--      <div class="ele-content-info">
              <ul>
                <li>
                  <span class="ele-title-txt">收货信息</span>
                  <el-button type="text" @click="copyInfo">复制</el-button>
                </li>
                <li>
                  <span class="ele-font-left">收货人:</span><span class="ele-font">{{ info.consignee }}</span>
                </li>
                <li>
                  <span class="ele-font-left">电话:</span><span class="ele-font">{{ info.phone }}</span>
                </li>
                <li>
                  <span class="ele-font-left">收货地址:</span><span class="ele-font">{{ info.receiptAddress }}</span>
                </li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">下单信息</span></li>
                <li><span class="ele-font-left">运费:</span><span>{{ freight }}</span></li>
                <li>
                  <span class="ele-font-left">下单门店:</span><span>{{ orderShop }}</span>
                </li>
                <li>
                  <span class="ele-font-left">门店地址:</span><span>{{ shopAddress }}</span>
                </li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">买家信息</span></li>
                <li><span class="ele-font-left">买家:</span><span>{{ info.consignee }}&nbsp;{{ info.phone }}</span></li>
                <li><span class="ele-font-left">备注:</span><span>{{ info.remark }}</span></li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">支付信息</span></li>
                <li>
                  <span class="ele-font-left">支付方式:</span><span>{{ payment }}</span>
                </li>
                <li>
                  <span class="ele-font-left">支付金额:</span><span>{{ payAmount }}</span>
                </li>
              </ul>
            </div>-->

      <table class="tableCustom">
        <thead>
          <tr>
            <td>商品</td>
            <td>单价</td>
            <td>数量</td>
            <td>类型</td>
            <td>运费</td>
            <td>优惠</td>
            <td>租期</td>
            <td>合计</td>
            <td>状态</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in goodsInfo" :key="index" class="for-list">
            <td class="ele-tr-td">
              <div class="ele-te-div">
                <img :src="item.goodsPic" alt="">
                <div class="right">
                  <p>{{ item.goodsName }} <span class="custom">医柜</span></p>
                  <p>规格:{{ item.goodsSpec }}</p>
                  <p>设备编号:{{ item.goodsSn }}</p>
                </div>
              </div>
            </td>
            <td>{{ item.goodsPrice }}</td>
            <td>{{ item.goodsCount }}</td>
            <td>{{ item.goodsType }}</td>
            <td><p>{{ item.shipDictName }}</p><p>{{ item.transport }}</p><p>{{ item.distributeTime }}</p><p>{{ item.freight }}</p></td>
            <td>{{ item.discount }}</td>
            <td>{{ item.total }}</td>
            <td>待付款</td>
          </tr>
        </tbody>
      </table>
      <!--拒绝原因  -->
      <el-dialog
        :modal="false"
        title="拒绝原因"
        :visible.sync="dialogRefues"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          v-model="refuseReason"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRefues = false">取 消</el-button>
          <el-button type="primary" @click="refuse">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改退款金额  -->
      <el-dialog
        :modal="false"
        title="修改退款金额"
        :visible.sync="dialogChangeAmount"
        width="30%"
        :before-close="handleClose"
      >
        <el-form>
          <el-form-item label="退款金额">
            <el-col :span="12">
              <el-input v-model="changeRefundAmount" placeholder="输入金额" />
            </el-col>
            <el-col :span="3">元</el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogChangeAmount = false">取 消</el-button>
          <el-button type="primary" @click="changeRefund">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--待商家处理-->
    <div v-if="state==='3'" class="WaitForPickUp">
      <div class="ele-title-1"><h4>订单详情</h4></div>
      <div class="ele-title-2">
        <el-col :span="24">
          <el-col :span="6"><h2>状态:待商家处理</h2></el-col>
          <el-col :span="6" class="el-col-offset-1"><h2>售后方式:换货</h2></el-col>
        </el-col>
      </div>
      <!--      <div class="ship-state">
        <p>退款金额：{{amount}}</p>
      </div>-->
      <!--      <div class="ele-button">
              <el-button
                class="ele-btn"
                type="primary"
                @click="changeAfterSaleState(1)"
              >同意</el-button>
              <el-button
                class="ele-btn"
                type="primary"
                @click="changeAfterSaleState(0)"
              >拒绝</el-button>
              <el-button
                class="ele-btn"
                type="primary"
                @click="changeAfterSaleState(2)"
              >修改退款金额</el-button>
            </div>-->
      <div class="custom-radio">
        <b>协商备注</b>
      </div>

      <div class="cus-baoguo">
        <div class="left">
          <div class="tops">
            <el-input v-model="remark" type="textarea" :rows="6" />
          </div>
          <div class="bottoms">
            <el-button @click="submitRemark">提交</el-button>
          </div>
        </div>
        <div class="right">
          <el-timeline v-for="(item,index) in remarks" :key="index">
            <el-timeline-item :timestamp="item.remarks+' '+item.userName" placement="top">
              <el-card>
                <h4>{{ item.remark }}</h4>
              </el-card>
            </el-timeline-item>

            <!--            <el-timeline-item timestamp="2018-4-2 12:00" placement="top">
                          <el-card>
                            <h4>更新 Github 模板</h4>
                          </el-card>
                        </el-timeline-item>-->
          </el-timeline>

        </div>
      </div>

      <div v-if=" pickUpInfo">
        <div class="cus-baoguo">
          <div class="left">
            <div class="tops">
              <div class="cus-btns">
                <p>
                  <el-button
                    type="text"
                    @click="$router.push({ name: 'TBRBTUModify' ,query:pickUpInfo})"
                  >修改</el-button>
                </p>
                <p><el-button type="primary" @click="sureTake">确认收货</el-button></p>
              </div>

              <p><span>取货时间:</span><span>{{ pickUpInfo.pickupTime }}</span></p>
              <div class="cus-middle">
                <p>
                  <span>取货方式:</span><span v-if="pickUpInfo.getGoodsStyle===1" class="margin">门店</span>
                </p>
                <p><span>送货员:</span><span class="margin">{{ pickUpInfo.deliveryMan }}</span></p>
              </div>
              <p><span>处理员:</span><span>{{ pickUpInfo.handler }}</span></p>
            </div>
            <div class="bottoms">
              <div class="cus-list">
                <div class="cus-left">
                  <img
                    :src="pickUpInfo.goodsPic"
                    alt=""
                  >
                </div>
                <div class="cus-right">
                  <p>{{ pickUpInfo.goodsName }}x{{ pickUpInfo.goodsCount }}</p>
                  <p>设备编号:{{ pickUpInfo.rfid }}</p>
                </div>
              </div>
              <!--                <div class="cus-list">
                  <div class="cus-left">
                    <img
                      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                      alt=""
                    >
                  </div>
                  <div class="cus-right">
                    <p>内容标题</p>
                    <p class="cus-font">规格:蓝色</p>
                    <p>设备编号:</p>
                  </div>
                </div>-->
            </div>
          </div>
          <div class="right">
            <p class="right-title">配送状态</p>
            <el-steps
              direction="vertical"
              :active="1"
              :space="50"
              style="margin-top:30px"
            >
              <el-step title="2021-2-22 12:22" description="已收货" />
              <el-step title="2021-2-22 12:22" description="送货中" />
              <el-step title="2021-2-22 12:22" description="待送货" />
              <el-step title="2021-2-22 12:22" description="已配货" />
              <el-step title="2021-2-22 12:22" description="待配货" />
            </el-steps>
          </div>
        </div>

      </div>

      <div class="ele-content-info">
        <ul>
          <li>
            <span class="ele-title-txt">售后信息</span>
          </li>
          <li>
            <span class="ele-font-left">售后编号:</span><span class="ele-font">{{ afterSaleInfo.afterSaleSn }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请售后时间:</span><span class="ele-font">{{ afterSaleInfo.applyTime }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请人:</span><span class="ele-font">{{ afterSaleInfo.applicant }}</span>
          </li>
          <li>
            <span class="ele-font-left">联系方式:</span><span class="ele-font">{{ afterSaleInfo.applicantPhone }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">售后类型</span></li>
          <li><span class="ele-font-left">售后方式:</span><span>{{ afterSaleInfo.afterSaleType }}</span></li>
          <li>
            <span class="ele-font-left">退款金额:</span><span>{{ afterSaleInfo.refundAmount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.refundCount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款原因:</span><span>{{ afterSaleInfo.refundReason }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">订单信息</span></li>
          <li><span class="ele-font-left">商品金额:</span><span>{{ afterSaleInfo.goodsAmount }}</span></li>
          <li><span class="ele-font-left">实付金额:</span><span>{{ afterSaleInfo.actualAmount }} &nbsp; 退款金额</span></li>
          <li><span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.goodsCount }}</span></li>
          <li><span class="ele-font-left">订单号:</span><span>{{ afterSaleInfo.orderSn }}</span></li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">下单信息</span></li>
          <li>
            <span class="ele-font-left">物流:</span><span>{{ afterSaleInfo.logistics }}</span>
          </li>
          <li>
            <span class="ele-font-left">下单门店:</span><span>{{ afterSaleInfo.storeName }}</span>
          </li>
          <li>
            <span class="ele-font-left">门店地址:</span><span>{{ afterSaleInfo.storeAddress }}</span>
          </li>
        </ul>
      </div>
      <!--      <div class="ele-content-info">
              <ul>
                <li>
                  <span class="ele-title-txt">收货信息</span>
                  <el-button type="text" @click="copyInfo">复制</el-button>
                </li>
                <li>
                  <span class="ele-font-left">收货人:</span><span class="ele-font">{{ info.consignee }}</span>
                </li>
                <li>
                  <span class="ele-font-left">电话:</span><span class="ele-font">{{ info.phone }}</span>
                </li>
                <li>
                  <span class="ele-font-left">收货地址:</span><span class="ele-font">{{ info.receiptAddress }}</span>
                </li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">下单信息</span></li>
                <li><span class="ele-font-left">运费:</span><span>{{ freight }}</span></li>
                <li>
                  <span class="ele-font-left">下单门店:</span><span>{{ orderShop }}</span>
                </li>
                <li>
                  <span class="ele-font-left">门店地址:</span><span>{{ shopAddress }}</span>
                </li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">买家信息</span></li>
                <li><span class="ele-font-left">买家:</span><span>{{ info.consignee }}&nbsp;{{ info.phone }}</span></li>
                <li><span class="ele-font-left">备注:</span><span>{{ info.remark }}</span></li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">支付信息</span></li>
                <li>
                  <span class="ele-font-left">支付方式:</span><span>{{ payment }}</span>
                </li>
                <li>
                  <span class="ele-font-left">支付金额:</span><span>{{ payAmount }}</span>
                </li>
              </ul>
            </div>-->

      <table class="tableCustom">
        <thead>
          <tr>
            <td>商品</td>
            <td>单价</td>
            <td>数量</td>
            <td>类型</td>
            <td>运费</td>
            <td>优惠</td>
            <td>租期</td>
            <td>合计</td>
            <td>状态</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in goodsInfo" :key="index" class="for-list">
            <td class="ele-tr-td">
              <div class="ele-te-div">
                <img :src="item.goodsPic" alt="">
                <div class="right">
                  <p>{{ item.goodsName }} <span class="custom">医柜</span></p>
                  <p>规格:{{ item.goodsSpec }}</p>
                  <p>设备编号:{{ item.goodsSn }}</p>
                </div>
              </div>
            </td>
            <td>{{ item.goodsPrice }}</td>
            <td>{{ item.goodsCount }}</td>
            <td>{{ item.goodsType }}</td>
            <td><p>{{ item.shipDictName }}</p><p>{{ item.transport }}</p><p>{{ item.distributeTime }}</p><p>{{ item.freight }}</p></td>
            <td>{{ item.discount }}</td>
            <td>{{ item.total }}</td>
            <td>待付款</td>
          </tr>
        </tbody>
      </table>
      <!--拒绝原因  -->
      <el-dialog
        :modal="false"
        title="拒绝原因"
        :visible.sync="dialogRefues"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          v-model="refuseReason"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRefues = false">取 消</el-button>
          <el-button type="primary" @click="refuse">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改退款金额  -->
      <el-dialog
        :modal="false"
        title="修改退款金额"
        :visible.sync="dialogChangeAmount"
        width="30%"
        :before-close="handleClose"
      >
        <el-form>
          <el-form-item label="退款金额">
            <el-col :span="12">
              <el-input v-model="changeRefundAmount" placeholder="输入金额" />
            </el-col>
            <el-col :span="3">元</el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogChangeAmount = false">取 消</el-button>
          <el-button type="primary" @click="changeRefund">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--售后完成-->
    <div v-if="state==='4'" class="WaitForPickUp">
      <div class="ele-title-1"><h4>订单详情</h4></div>
      <div class="ele-title-2">
        <el-col :span="24">
          <el-col :span="6"><h2>状态:售后完成</h2></el-col>
          <!--          <el-col :span="6" class="el-col-offset-1"><h2>售后方式:换货</h2></el-col>-->
        </el-col>
      </div>
      <div class="ship-state">
        <p>退款金额：{{ amount }}</p>
      </div>
      <!--      <div class="ele-button">
              <el-button
                class="ele-btn"
                type="primary"
                @click="changeAfterSaleState(1)"
              >同意</el-button>
              <el-button
                class="ele-btn"
                type="primary"
                @click="changeAfterSaleState(0)"
              >拒绝</el-button>
              <el-button
                class="ele-btn"
                type="primary"
                @click="changeAfterSaleState(2)"
              >修改退款金额</el-button>
            </div>-->
      <div class="custom-radio">
        <b>协商备注</b>
      </div>

      <div class="cus-baoguo">
        <div class="left">
          <div class="tops">
            <el-input v-model="remark" type="textarea" :rows="6" />
          </div>
          <div class="bottoms">
            <el-button @click="submitRemark">提交</el-button>
          </div>
        </div>
        <div class="right">
          <el-timeline v-for="(item,index) in remarks" :key="index">
            <el-timeline-item :timestamp="item.remarks+' '+item.userName" placement="top">
              <el-card>
                <h4>{{ item.remark }}</h4>
              </el-card>
            </el-timeline-item>

            <!--            <el-timeline-item timestamp="2018-4-2 12:00" placement="top">
                          <el-card>
                            <h4>更新 Github 模板</h4>
                          </el-card>
                        </el-timeline-item>-->
          </el-timeline>

        </div>
      </div>

      <div v-if=" pickUpInfo">
        <div class="cus-baoguo">
          <div class="left">
            <div class="tops">
              <!--              <div class="cus-btns">
                <p>
                  <el-button
                    type="text"
                    @click="$router.push({ name: 'TBRBTUModify' ,query:pickUpInfo})"
                  >修改</el-button>
                </p>
                <p><el-button type="primary" @click="sureTake">确认收货</el-button></p>
              </div>-->

              <p><span>取货时间:</span><span>{{ pickUpInfo.pickupTime }}</span></p>
              <div class="cus-middle">
                <p>
                  <span>取货方式:</span><span v-if="pickUpInfo.getGoodsStyle===1" class="margin">门店</span>
                </p>
                <p><span>送货员:</span><span class="margin">{{ pickUpInfo.deliveryMan }}</span></p>
              </div>
              <p><span>处理员:</span><span>{{ pickUpInfo.handler }}</span></p>
            </div>
            <div class="bottoms">
              <div class="cus-list">
                <div class="cus-left">
                  <img
                    :src="pickUpInfo.goodsPic"
                    alt=""
                  >
                </div>
                <div class="cus-right">
                  <p>{{ pickUpInfo.goodsName }}x{{ pickUpInfo.goodsCount }}</p>
                  <p>设备编号:{{ pickUpInfo.rfid }}</p>
                </div>
              </div>
              <!--                <div class="cus-list">
                                <div class="cus-left">
                                  <img
                                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                    alt=""
                                  >
                                </div>
                                <div class="cus-right">
                                  <p>内容标题</p>
                                  <p class="cus-font">规格:蓝色</p>
                                  <p>设备编号:</p>
                                </div>
                              </div>-->
            </div>
          </div>
          <div class="right">
            <p class="right-title">配送状态</p>
            <el-steps
              direction="vertical"
              :active="1"
              :space="50"
              style="margin-top:30px"
            >
              <el-step title="2021-2-22 12:22" description="已收货" />
              <el-step title="2021-2-22 12:22" description="送货中" />
              <el-step title="2021-2-22 12:22" description="待送货" />
              <el-step title="2021-2-22 12:22" description="已配货" />
              <el-step title="2021-2-22 12:22" description="待配货" />
            </el-steps>
          </div>
        </div>

      </div>

      <div class="ele-content-info">
        <ul>
          <li>
            <span class="ele-title-txt">售后信息</span>
          </li>
          <li>
            <span class="ele-font-left">售后编号:</span><span class="ele-font">{{ afterSaleInfo.afterSaleSn }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请售后时间:</span><span class="ele-font">{{ afterSaleInfo.applyTime }}</span>
          </li>
          <li>
            <span class="ele-font-left">申请人:</span><span class="ele-font">{{ afterSaleInfo.applicant }}</span>
          </li>
          <li>
            <span class="ele-font-left">联系方式:</span><span class="ele-font">{{ afterSaleInfo.applicantPhone }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">售后类型</span></li>
          <li><span class="ele-font-left">售后方式:</span><span>{{ afterSaleInfo.afterSaleType }}</span></li>
          <li>
            <span class="ele-font-left">退款金额:</span><span>{{ afterSaleInfo.refundAmount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.refundCount }}</span>
          </li>
          <li>
            <span class="ele-font-left">退款原因:</span><span>{{ afterSaleInfo.refundReason }}</span>
          </li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">订单信息</span></li>
          <li><span class="ele-font-left">商品金额:</span><span>{{ afterSaleInfo.goodsAmount }}</span></li>
          <li><span class="ele-font-left">实付金额:</span><span>{{ afterSaleInfo.actualAmount }} &nbsp; 退款金额</span></li>
          <li><span class="ele-font-left">退款件数:</span><span>{{ afterSaleInfo.goodsCount }}</span></li>
          <li><span class="ele-font-left">订单号:</span><span>{{ afterSaleInfo.orderSn }}</span></li>
        </ul>

        <ul>
          <li><span class="ele-title-txt">下单信息</span></li>
          <li>
            <span class="ele-font-left">物流:</span><span>{{ afterSaleInfo.logistics }}</span>
          </li>
          <li>
            <span class="ele-font-left">下单门店:</span><span>{{ afterSaleInfo.storeName }}</span>
          </li>
          <li>
            <span class="ele-font-left">门店地址:</span><span>{{ afterSaleInfo.storeAddress }}</span>
          </li>
        </ul>
      </div>
      <!--      <div class="ele-content-info">
              <ul>
                <li>
                  <span class="ele-title-txt">收货信息</span>
                  <el-button type="text" @click="copyInfo">复制</el-button>
                </li>
                <li>
                  <span class="ele-font-left">收货人:</span><span class="ele-font">{{ info.consignee }}</span>
                </li>
                <li>
                  <span class="ele-font-left">电话:</span><span class="ele-font">{{ info.phone }}</span>
                </li>
                <li>
                  <span class="ele-font-left">收货地址:</span><span class="ele-font">{{ info.receiptAddress }}</span>
                </li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">下单信息</span></li>
                <li><span class="ele-font-left">运费:</span><span>{{ freight }}</span></li>
                <li>
                  <span class="ele-font-left">下单门店:</span><span>{{ orderShop }}</span>
                </li>
                <li>
                  <span class="ele-font-left">门店地址:</span><span>{{ shopAddress }}</span>
                </li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">买家信息</span></li>
                <li><span class="ele-font-left">买家:</span><span>{{ info.consignee }}&nbsp;{{ info.phone }}</span></li>
                <li><span class="ele-font-left">备注:</span><span>{{ info.remark }}</span></li>
              </ul>

              <ul>
                <li><span class="ele-title-txt">支付信息</span></li>
                <li>
                  <span class="ele-font-left">支付方式:</span><span>{{ payment }}</span>
                </li>
                <li>
                  <span class="ele-font-left">支付金额:</span><span>{{ payAmount }}</span>
                </li>
              </ul>
            </div>-->

      <table class="tableCustom">
        <thead>
          <tr>
            <td>商品</td>
            <td>单价</td>
            <td>数量</td>
            <td>类型</td>
            <td>运费</td>
            <td>优惠</td>
            <td>租期</td>
            <td>合计</td>
            <td>状态</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in goodsInfo" :key="index" class="for-list">
            <td class="ele-tr-td">
              <div class="ele-te-div">
                <img :src="item.goodsPic" alt="">
                <div class="right">
                  <p>{{ item.goodsName }} <span class="custom">医柜</span></p>
                  <p>规格:{{ item.goodsSpec }}</p>
                  <p>设备编号:{{ item.goodsSn }}</p>
                </div>
              </div>
            </td>
            <td>{{ item.goodsPrice }}</td>
            <td>{{ item.goodsCount }}</td>
            <td>{{ item.goodsType }}</td>
            <td><p>{{ item.shipDictName }}</p><p>{{ item.transport }}</p><p>{{ item.distributeTime }}</p><p>{{ item.freight }}</p></td>
            <td>{{ item.discount }}</td>
            <td>{{ item.total }}</td>
            <td>待付款</td>
          </tr>
        </tbody>
      </table>
      <!--拒绝原因  -->
      <el-dialog
        :modal="false"
        title="拒绝原因"
        :visible.sync="dialogRefues"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          v-model="refuseReason"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRefues = false">取 消</el-button>
          <el-button type="primary" @click="refuse">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改退款金额  -->
      <el-dialog
        title="修改退款金额"
        :modal="false"
        :visible.sync="dialogChangeAmount"
        width="30%"
        :before-close="handleClose"
      >
        <el-form>
          <el-form-item label="退款金额">
            <el-col :span="12">
              <el-input v-model="changeRefundAmount" placeholder="输入金额" />
            </el-col>
            <el-col :span="3">元</el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogChangeAmount = false">取 消</el-button>
          <el-button type="primary" @click="changeRefund">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import { afterSaleButton, cancelOrder, cancelPack, postRemark, receivedCommodity } from '@/api/order'
// import { toChinesNum } from '@/utils/chineseNum'

export default {
  name: 'AfterSaleDetails',
  data() {
    return {
      // 售后
      afterSaleId: '', // 售后订单id
      state: '', // 订单状态
      type: '', // 售后方式
      amount: '', // 退款金额
      remark: '', // 提交备注
      remarks: [], // 协商备注
      afterSaleInfo: { // 售后信息
        afterSaleSn: '', // 售后编号
        applyTime: '', // 售后申请时间
        applicant: '', // 申请人
        applicantPhone: '', // 联系方式
        afterSaleType: '', // 售后方式
        refundAmount: '', // 退款金额
        refundCount: '', // 退款件数
        refundReason: '', // 退款原因
        goodsAmount: '', // 商品金额
        actualAmount: '', // 实付金额
        goodsCount: '', // 退款件数
        orderSn: '', // 订单号
        logistics: '', // 物流
        storeName: '', // 下单门店
        storeAddress: '' // 门店地址
      },
      goodsInfo: [],
      /* {
        goodsName:'',                  //商品名称
        goodsPic:'',                   //商品图片
        goodsSpec:'',                  //商品规格
        goodsSn:'',                    //商品编号
        goodsCount:'',                 //商品数量
        goodsType:'',                  //商品类型
        freight:'',                    //运费
        discount:'',                   //折扣
        total:'',                      //合计
        goodsState:''                  //状态
      },*/
      pickUpInfo: { // 售后商品信息
        goodsId: '',
        pickupTime: '', // 取货时间
        getGoodsStyle: '', // 取货方式
        deliveryMan: '', // 送货员
        handler: '', // 处理员
        storageState: '', // 入库状态
        goodsName: '', // 商品名
        goodsPic: '', // 商品图片
        goodsCount: '', // 商品数量
        rfid: '', // 设备编号
        goodsSpec: '' // 商品规格
      },
      pickUpState: {
        time: '', // 时间
        state: '' // 状态
      },
      dialogRefues: false,
      dialogChangeAmount: false,
      refuseReason: '',
      changeRefundAmount: '',
      afterSaleType: ''
      /* afterSaleCode:'',
      afterSaleTime:'',
      applicant:'',
      afterSaleContract:'',*/

    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.state = '1'
    },
    /** 取消包裹*/
    cancelPack,
    /** 取消订单*/
    cancelOrder() {
      this.$confirm('是否取消订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelOrder(this.id).then(response => {
          console.log(response.data.data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    /** 售后订单*/
    /** 点击同意、修改、修改金额*/
    changeAfterSaleState(state) {
      if (state === 0) {
        this.dialogRefues = true
        this.afterSaleType = state
      } else if (state === 1) {
        const data = {
          id: this.afterSaleId,
          state: state
        }
        afterSaleButton(data).then(response => {
          console.log(response.data.data)
          this.$message({ type: 'success', message: '成功' })
        })
      } else {
        this.dialogChangeAmount = true
        this.afterSaleType = state
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    /** 弹出框按钮功能*/
    /** 拒绝原因*/
    refuse() {
      const data = {
        id: this.afterSaleId,
        state: this.afterSaleType,
        reason: this.refuseReason
      }
      afterSaleButton(data).then(response => {
        console.log(response.data.data)
        this.$message({ type: 'success', message: '拒绝原因提交成功' })
      })
    },
    /** 修改退款金额*/
    changeRefund() {
      const data = {
        id: this.afterSaleId,
        state: this.afterSaleType,
        amount: this.changeRefundAmount
      }
      afterSaleButton(data).then(response => {
        console.log(response.data.data)
        this.$message({ type: 'success', message: '修改退款金额成功' })
      })
    },
    /** 提交备注*/
    submitRemark() {
      postRemark(this.remark).then(response => {
        console.log(response.data.data)
      })
    },
    sureTake() {
      const data = {
        id: this.afterSaleId,
        commodityId: this.goodsInfo.goodsId
      }
      receivedCommodity(data).then(response => {
        console.log(response.data.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.afterSaleDetails {
  .WaitForPickUp {
    padding: 50px 100px;
    .ele-title-2 {
      margin-top: 40px;
    }
    .ele-Payment {
      border: 2px solid #f3f3f3;
      border-radius: 5px;
      padding-left: 20px;
      .Payment-top,
      .Payment-bottom {
        display: flex;
        p {
          span:first-child {
            display: inline-block;
            width: 80px;
          }
          span:last-child {
            display: inline-block;
            width: 150px;
          }
        }
      }
      .Payment-top {
        .cus-font {
          color: gray;
        }
      }
    }
    .ele-button {
      margin: 30px 0px 30px 0px;
      .ele-btn {
        width: 120px;
      }
    }
    .custom-radio {
      margin: 30px 0px;
    }
    .cus-baoguo {
      border-radius: 5px;
      border: 1px solid #e6e6e6;
      display: flex;
      .left,
      .right {
        padding: 30px;
      }
      .left {
        flex-basis: 60%;
        border-right: 1px solid #e6e6e6;
        position: relative;
        .cus-btns {
          position: absolute;
          display: flex;
          right: 0;
          top: 0;
          .el-button {
            margin: 0px 20px;
          }
        }
        .tops {
          p {
            margin: 10px 0px;
            span:first-child {
              display: inline-block;
              width: 80px;
            }
          }
          .cus-middle {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .margin {
              margin-right: 20px;
            }
            .el-button {
              margin-left: 20px;
            }
          }
        }
        .bottoms {
          display: flex;
          flex-wrap: wrap;
          margin-top: 40px;
          .cus-list {
            width: 400px;
            display: flex;
            align-items: center;
            .cus-left {
              width: 100px;
              height: 100px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .cus-right {
              margin-left: 20px;
              .cus-font {
                font-size: 14px;
                color: gray;
              }
            }
          }
        }
      }
      .right {
        flex-grow: 1;
        position: relative;
        .right-title {
          position: absolute;
          top: 10px;
        }
      }
    }
    .ele-content-info {
      background: #f3f3f3;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      ul,
      li {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
      }
      ul {
        padding: 20px 60px 20px 20px;
        li {
          padding: 10px 0px;
          font-size: 15px;
        }
        .ele-title-txt {
          font-size: 16px;
          font-weight: bold;
          margin-right: 20px;
        }
        .ele-font {
          color: gray;
        }
        .ele-font-left {
          display: inline-block;
          width: 80px;
          padding-left: 10px;
        }
      }
    }

    .tableCustom {
      width: 100%;
      border: 1px solid #f3f3f3;
      border-collapse: collapse;
      margin-top: 30px;
      thead {
        background: #f3f3f3;
        height: 50px;
        tr > td {
          line-height: 50px;
          text-align: center;
          font-weight: bold;
          font-size: 15px;
        }
      }
      tbody {
        .for-list > .ele-tr-td {
          width: 25%;
          .ele-te-div {
            display: flex;
            align-items: center;
            padding-left: 20px;
            img {
              width: 100px;
              height: 100px;
              object-fit: cover;
            }
            .right {
              margin-left: 15px;
              font-size: 14px;
              p:nth-child(2) {
                color: gray;
              }
              .custom {
                font-size: 12px;
                display: inline-block;
                background: #2db300;
                color: white;
                padding: 3px 8px;
              }
            }
          }
        }
      }
    }
    .el-dialog {
      .TBRBTU-information {
        .flex {
          display: flex;
          align-items: center;
          margin: 20px 0px;
        }
        .cus-h4 {
          width: 80px;
          padding: 0;
          margin: 0px;
        }
        .cus-radio {
          padding: 0;
          margin: 0px;
          .el-input {
            width: 300px;
          }
        }
      }
      .TBRBTU-detail {
        .cus-h4 {
          width: 80px;
        }
        .cus-list {
          width: 400px;
          display: flex;
          align-items: center;
          .cus-left {
            width: 100px;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .cus-right {
            margin-left: 20px;
            .cus-font {
              font-size: 14px;
              color: gray;
            }
          }
        }
      }
      .TBRBTU-mode {
        margin-top: 40px;
        .cus-h4 {
          width: 80px;
        }
        .cus-wuliu {
          p {
            span {
              font-size: 14px;
              margin-right: 10px;
            }
            .el-select,
            .el-input {
              width: 200px;
            }
          }
        }
        .cus-Distribution {
          display: flex;
          .left,
          .right {
            width: 400px;
          }
        }
      }
      .footer {
        .cus-btn-item {
          margin-top: 30px;
          margin-left: 80px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
  }
}
</style>
